<template>
  <div class="app">
    <h1>{{ msg }},学生姓名是:{{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->
    <Student @atguigu="getStudentName" @demo="m1" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import School from "./components/School";
import Student from "./components/Student";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好啊!",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名:", name);
    },
    /* getStudentName(name, x, y, z) {
      console.log("App收到了学生名:", name, x, y, z);
    }, */
    getStudentName(name, ...params) {
      console.log("App收到了学生名:", name, params);
      this.studentName = name;
    },
    m1() {
      console.log("demo事件被触发了");
    },
    show() {
      alert(123);
    },
  },
  mounted() {
    // this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
    // this.$refs.student.$once("atguigu", this.getStudentName);  //绑定自定事件(一次性)
    this.$refs.student.$on("atguigu", (name, ...params) => {
      console.log("App收到了学生名:", name, params);
      //如果这边的使用的普通函数,this指向student这个vc,
      //但是我这边用的是箭头函数,向外找到mounted的this,mounted的this指向App这个vc
      console.log(this);
      this.studentName = name;
    });
  },
};
</script>
<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>

